<template>
  <div class="app-container">
    <el-row type="flex" justify="center">
      <el-col :span="22">
        <div class="mytable">
          <el-table height="510" stripe :data="WarningEventList" class="tabletab" header-cell-class-name="table_header">
            <el-table-column label="报警类型" prop="eventName"></el-table-column>
            <el-table-column label="抓拍图片">
              <template slot-scope="scope">
                <el-image style="width: 256px;height:144px"
                          :src="scope.row.imgbase64"
                          fit="fill"
                          alt="图片未找到">
                </el-image>
              </template>
            </el-table-column>
            <el-table-column label="日期" > <span slot-scope="rows">{{timestampToDateString(rows.row.time)}}</span></el-table-column>
            <el-table-column label="报警相机" prop="deviceName"></el-table-column>
            <el-table-column label="处理结果" prop="status">
              <template slot-scope="scope">
                <div>
                  <span v-if="scope.row.state === 1">待核查</span>
                  <span v-else-if="scope.row.state === 2">已核查</span>
                  <span v-else-if="scope.row.state === 3">已排除</span>
                  <span v-else-if="scope.row.state === 4">已推送</span>
                  <span v-else>未知状态</span> <!-- 可选：处理未知状态 -->
                </div>
              </template>
            </el-table-column>
            <el-table-column
                fixed="right"
                label="报警视频"
                width="220">
              <template slot-scope="scope" >
                <el-button size="mini" @click="openPlyear(scope.row.video_url)" icon="el-icon-caret-right" plain>播放</el-button>
              </template>
            </el-table-column>
            <el-table-column
                fixed="right"
                v-if="itemType==1"
                label="操作"
                width="220">
              <template slot-scope="scope" >
                <el-button size="mini"  @click="handleEdit(scope.row)" icon="el-icon-edit" plain>查看</el-button>
              </template>
            </el-table-column>
            <!--           -->
          </el-table>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="8" :offset="15">
        <div class="block" >
          <pagination
              class="pager"
              v-show="total>0"
              :total="total"
              :page.sync="queryParams.pageNum"
              :limit.sync="queryParams.pageSize"
              @pagination="getEventing"
          />
        </div>
      </el-col>
    </el-row>
    <el-dialog
        :title="formdialog.title"
        :visible.sync="formdialog.open"
        :append-to-body="true"
        width="600px"
        custom-class="custom-dialog"
    >
      <el-form ref="form" :model="AddForm" label-width="120px" class="custom-form">
        <el-form-item label="报警类型：" prop="algorName" class="center-label">
          <el-tag type="success" class="form-tag">{{ AddForm.eventName }}</el-tag>
        </el-form-item>
        <el-form-item label="日期：" prop="date" class="center-label">
          <el-tag type="info" class="form-tag">{{ AddForm.time }}</el-tag>
        </el-form-item>
        <el-form-item label="抓拍图片：" prop="image">
          <el-image
              v-if="AddForm.imgbase64"
              :src="AddForm.imgbase64"
              :preview-src-list="[AddForm.imgbase64]"
              fit="cover"
              @click="handleImagePreview(AddForm.imgbase64)"
              class="form-tagimage"></el-image>
          <el-tag v-else type="warning" class="form-tagimage">无图片</el-tag>
        </el-form-item>
        <el-form-item label="报警相机：" prop="area" class="center-label">
          <el-tag type="primary" class="form-tag">{{ AddForm.deviceName }}</el-tag>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
      <el-button  @click="handleVerify(AddForm)" class="custom-button">核 查</el-button>
      <el-button @click="handleExclude(AddForm)" class="custom-button">排 除</el-button>
        <!--      <el-button type="primary" @click="handlePush(AddForm)" class="custom-button">推 送</el-button>-->
    </span>
    </el-dialog>
    <el-dialog
        title="视频播放"
        :visible.sync="openPlyearValue"
        width="30%"
        :modal="false"
        :before-close="handleClose">
      <div>
        <LivePlayer
            ref="LivePlayer"
            :videoUrl="plyearUrl"
            fluent autoplay
            live stretch
            alt="请选择设备">
        </LivePlayer>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { listMenu, getMenu, delMenu, addMenu, updateMenu } from "@/api//menu/menu";
import {getWarningEvent,getOneWarning,wipeWaring,inspectWaring,pushWaring} from "@/api/warning/wraning";
import {getOneAlgor} from "@/api/algor/algor";
import LivePlayer from "@liveqing/liveplayer";

export default {
  name: "loginLog",
  props : {
    itemType:String,
    SelectForm:[],
  },
  data() {
    return {
      plyearUrl:"",
      openPlyearValue:false,
      // 遮罩层
      loading: true,
      // 显示搜索条件
      showSearch: true,
      WarningEventList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 是否展开，默认全部折叠
      isExpandAll: false,
      // 重新渲染表格状态
      refreshTable: true,
      // 查询参数
      queryParams: {
        pageSize:10,
        pageNum:1,
        eventTypeId: undefined,
        deviceName: undefined,
        startTime:undefined,
        endTime:undefined,
        state:undefined,
      },
      total:0,
      // 表单参数
      form: {},
      formLabelWidth:'120px',
      formdialog:{
        open:false,
        title: '查看信息'
      },
      AddForm:{
      },
      // 表单校验
      // rules: {
      //   menuName: [
      //     {required: true, message: "菜单名称不能为空", trigger: "blur"}
      //   ],
      //   orderNum: [
      //     {required: true, message: "菜单顺序不能为空", trigger: "blur"}
      //   ],
      //   path: [
      //     {required: true, message: "路由地址不能为空", trigger: "blur"}
      //   ]
      // }
    };
  },
  created() {
    this.getItemType();
    //this.getSelectForm();
  },
  components:{
    LivePlayer
  },
  methods: {
    handleClose(done) {
      this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
    },
    openPlyear(vedioUrl){
      console.log(vedioUrl)
      this.plyearUrl=vedioUrl;
      this.openPlyearValue=true;
    },
    formatTimestamp(timestamp) {
      const date = new Date(timestamp * 1000); // 将十位数的秒级时间戳转换为毫秒级
      return date.toISOString(); // 返回ISO格式的日期和时间字符串
    },
    convertISOToCustomFormat(isoString) {
      const date = new Date(isoString);
      const year = date.getFullYear();
      const month = (date.getMonth() + 1).toString().padStart(2, '0');
      const day = date.getDate().toString().padStart(2, '0');
      const hours = date.getHours().toString().padStart(2, '0');
      const minutes = date.getMinutes().toString().padStart(2, '0');
      const seconds = date.getSeconds().toString().padStart(2, '0');

      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    },
    timestampToDateString(timestamp) {
      console.log(timestamp)
      const formattedDate = this.formatTimestamp(timestamp);
      const dateString = this.convertISOToCustomFormat(formattedDate);
      console.log(formattedDate); // 输出格式化的日期时间字符串
      // let year = date.getFullYear(); // 获取年份
      // let month = (date.getMonth() + 1).toString().padStart(2, '0'); // 获取月份并补零
      // let day = date.getDate().toString().padStart(2, '0'); // 获取日期并补零
      // return year.toString() + month + day; // 拼接为 yyyymmdd 格式
      return dateString
    },
    getEventing(){
      this.loading = true;
      let data={
        "pageSize": this.queryParams.pageSize,
        "pageNum": this.queryParams.pageNum,
        "eventTypeId": this.queryParams.eventTypeId,
        "deviceName": this.queryParams.deviceName,
        "state": this.queryParams.state,
        "startTime": this.queryParams.startTime,
        "endTime": this.queryParams.endTime,
      }
      getWarningEvent(data).then(res=>{
        this.WarningEventList=res.rows;
        this.loading = false;
        this.total = res.total
      })
    },
    getItemType(){
      switch (this.itemType)
      { case 0:                           this.getEventing(); break;
        case 1: this.queryParams.state=1; this.getEventing(); break;
        case 2: this.queryParams.state=2; this.getEventing(); break;
        case 3: this.queryParams.state=3; this.getEventing(); break;
        case 4: this.queryParams.state=4; this.getEventing(); break;
      }
    },
    getSelectForm(){
      console.log("参数")
      console.log(this.SelectForm)
    },
    handleEdit(row){

      getOneWarning(row.id).then(resp=>{

        this.AddForm = resp.data;
        console.log("resp")
        console.log(this.AddForm)
        this.formdialog.open = true;
        // this.formdialog.title = '编辑算法'
      })
    },
    // 选择图标
    selected(name) {
      this.form.icon = name;
    },
    //图片放大
    handleImagePreview(imgSrc) {
      this.$refs.imagePreview.show(imgSrc);

    },
    //排除
    handleExclude(data){
      wipeWaring(data).then(resp=>{
        if (resp.msg==='消息排除成功'){
          this.$model.msgSuccess(resp.msg)
        }else {
          this.$model.msgError(resp.msg)
        }
        this.formdialog.open = false
        this.getItemType();
      })
    },
    //核实
    handleVerify(data){
      inspectWaring(data).then(resp=>{
        if (resp.msg==='消息核查成功'){
          this.$model.msgSuccess(resp.msg)
        }else {
          this.$model.msgError(resp.msg)
        }
        this.formdialog.open = false
        this.getItemType();
      })
    },
    //推送
    handlePush(data){
      pushWaring(data).then(resp=>{
        if (resp.msg==='消息推送成功'){
          this.$model.msgSuccess(resp.msg)
        }else {
          this.$model.msgError(resp.msg)
        }
        this.formdialog.open = false
        this.getItemType();
      })
    },
    /** 搜索按钮操作 */
    handleQuery(data) {
      console.log("报警类型")
      console.log(data.alarmtype)
      this.queryParams.eventTypeId=data.alarmtype
      this.queryParams.deviceName=data.device
      this.queryParams.endTime=data.datetime2
      this.queryParams.startTime=data.datetime2

      this.getEventing();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.queryParams = {
        pageSize:10,
        pageNum:1,
        eventName: undefined,
        deviceName: undefined,
        startTime:undefined,
        endTime:undefined,
        state:undefined,

      }
      this.getEventing();
    },
    // /** 删除按钮操作 */
    // handleDelete(row) {
    //   console.log(row)
    //   this.$model.confirm('是否确认删除名称为"' + row.menuName + '"的数据项？').then(function () {
    //     return delMenu(row.menuId);
    //   }).then(() => {
    //     this.getList();
    //     this.$model.msgSuccess("删除成功");
    //   }).catch(() => {
    //   });
    // }
  }
};
</script>

<style scoped>
.bread /deep/ .el-breadcrumb__inner{
  color: #000000;
}
.bread /deep/ .el-breadcrumb__inner:hover{color: #000000;}
.el-button{
  background-color: #4686D0;
  color: #ffffff;
  border: #4686D0;
  font-size: 12px;
  font-family: "微软雅黑";
}
.el-row{
  margin-top: 20px;
  margin-bottom:20px;
}
.el-input{
  width:250px;
}
.custom-form {
  padding: 20px;
  background-color: #f9fafb;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.form-tag {
  width: 100%;
  text-align: left;
  padding: 10px;
  border-radius: 4px;
  background-color: #f0f2f5;
  border: 1px solid #dcdfe6;
  font-size: 14px;
  color: #606266;
}

.form-image {
  width: 100%;
  max-height: 200px;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  overflow: hidden;
  margin-top: 10px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.dialog-footer {
  text-align: right;
  margin-top: 20px;
}

.custom-button {
  margin-left: 10px;
  padding: 10px 20px;
  border-radius: 4px;
  font-size: 14px;
  transition: all 0.3s ease;
}

.custom-button:hover {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.custom-dialog {
  overflow: hidden;
}

.custom-form .el-form-item {
  margin-bottom: 20px;
}

.center-label .el-form-item__label {
  text-align: left;
}

.form-tag {
  background-color: #f5f7fa;
  color: #409eff;
  border-color: #dcdcdc;
  padding: 5px 10px;
  border-radius: 4px;
}
.form-tagimage{
  width: 300px; /* 设置图片固定宽度为300px，可根据实际需求调整数值 */
  height: 200px; /* 设置图片固定高度为200px，可根据实际需求调整数值 */
  object-fit: cover; /* 保持和 el-image 组件的 fit="cover" 属性一致，确保图片按比例缩放填充给定的宽高区域 */
  border: 1px solid #ccc; /* 可添加图片边框，让图片展示更美观，颜色可自行调整 */
  border-radius: 4px; /* 给图片添加边框圆角效果，数值可根据喜好调整 */
}
.form-image {
  cursor: pointer;
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

.dialog-footer {
  text-align: right;
  padding-right: 20px;
}

.custom-button {
  margin-left: 10px;
}
.inputem /deep/ .el-input__inner {
  background-color: rgba(0, 0, 0, 0) ;
  color: #000000;
  border:1px solid #1A3B5B;
}
.inputem /deep/ .el-input__inner:focus{border-color:#4c87c2}
.inputem /deep/ .el-input__inner:hover{border-color:#4c87c2}
.inputem /deep/ .el-input-group__append{
  background-color: #265389;
  border:1px solid #265389;
}


.dialog-footer {
  text-align: right;
}

/* .tabletab /deep/ .el-table__header-wrapper{
  background-color: #131627;
  font-family: "微软雅黑";
  font-size: 14px;
} */


/*.tabletab /deep/ .el-table__row{*/
/*  background-color: #131627;*/
/*  font-family: "微软雅黑";*/
/*  font-size: 14px;*/
/*}*/

/*.tabletab /deep/ .el-table__body-wrapper{*/
/*  background-color: #131627;*/
/*  font-family: "微软雅黑";*/
/*  font-size: 14px;*/
/*}*/

/* .el-table::before {
	 left: 0;
	 bottom: 0;

	 height: 0px;
} */

/*::v-deep .cell{*/
/*  color:#ffffff;*/
/*}*/
/*::v-deep.el-table tbody tr:hover > td {*/
/*  background-color: #2b3b5256 !important;*/

/*}*/
/*.tabletab /deep/ .table_header{*/
/*  background-color: #2b3b52 !important;*/
/*}*/
/*.mytable /deep/ .el-table__row>td{*/
/*  !* 去除表格线 *!*/
/*  border-bottom:1px solid #2B3B52;*/
/*}*/
/*.mytable /deep/ .el-table th.is-leaf {*/
/*  !* 去除上边框 *!*/
/*  border: none;*/
/*}*/

/*::v-deep .el-table::before{*/
/*  !* 去除下边框 *!*/
/*  !* height: 0; *!*/
/*  background-color: #2B3B52;*/
/*  !* height: 2px; *!*/
/*}*/
/*.mytable /deep/ .el-table th.el-table__cell{*/
/*  background-color: #2b3b52;*/
/*}*/
</style>
